List boxes let you pick the item you want out of a multiple-choice box. The listbox itself is created with the <SELECT> tag, and the items inside it are created by one or more <OPTION> tags. You can have any number of <OPTION> tags in a list. The list is terminated with a </SELECT> tag.
The list can appear with many items showing at once, or it can appear in a drop-down box - normally you see one item at a time, but click to see more. The markup for the two styles is identical, except for the optional SIZE attribute. Leave off SIZE to make a drop-down box; use SIZE to make a list box of the size you wish.
<SELECT NAME="list" SIZE="3">
<OPTION value="one">This is item 1</option>
<OPTION value="two">This is item 2</option>
<OPTION value="three">This is item 3</option>
</SELECT>
gives:
<SELECT NAME="list">
<OPTION value="one">This is item 1</option>
<OPTION value="two">This is item 2</option>
<OPTION value="three">This is item 3</option>
</SELECT>
gives:
The size option sets the number of items visible at once. If it is not given, the select is
shown as a drop-down list.
The multiple option allows selecting more than one item.
<SELECT NAME="list" SIZE="3" multiple>
The selected option allows preselecting the items
<OPTION value="three" selected>This is item 3
Use the selectedIndex property to test which option item is selected in the list:
function test_selection(form) {
alert (form.list.selectedIndex);
}
If you want the text of the selected list item instead of the index, use this:
function testSelect (form) {
Item = form.list.selectedIndex;
Result = form.list.options[Item].text;
alert (Result);
}